<template>
  <div class="root">
    <video :src="wallpaper" autoplay loop muted></video>
    <el-button type="primary"  @click="getWallPaper">切换背景</el-button>
    <LoginLayout>
      <template v-slot:login-form>
        <LoginForm></LoginForm>
      </template>
    </LoginLayout>
  </div>
</template>

<script>
import LoginLayout from '@/layout/login'
import { HttpGet, HttpPost } from '@/api/http'
import LoginForm from './components/LoginFrom.vue'
export default {
  components: {
    LoginLayout,
    LoginForm,
  },
  data() {
    return {
      wallpaper: '',
    }
  },
  created() {
    this.getWallPaper()
    this.checkRedirect()
  },
  methods: {
    checkRedirect() {
      if (this.$route.query.redirect) {
        this.$message.warning('请先登录账号')
        return
      }
    },
    async getWallPaper() {
      try {
        const res = await HttpGet({ url: '/wallpaper/one' })
        if (res.code == 200) {
          this.wallpaper = res.data[0].url
        }
      } catch (e) {
        console.log(e);
        this.$message.warning('背景图加载失败')
      }
    }
  },
}
</script>

<style scoped>
.root {
  height: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}

video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -99;
  object-fit: cover;
}
.el-button{
  position: absolute;
  right: 10px;
  top: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  z-index: 99;
  background-color: rgba(0,0,0,0);
  border: 1px solid #fff;
  transition: all 0.5s;
}
.el-button:hover{
  background-color: rgba(0,0,0,.3);
}

>>> .el-button--default{
  color: #fff;
}


</style>